<template>
	<view>
		<uni-popup ref="popup" type="bottom">
			<view class="payBox">
				<view class="price">
					￥{{amount}}
				</view>
				<view class="close" @click="close">
					<uni-icons type="closeempty" size="32" color="#eee"></uni-icons>
				</view>
				<view>
					<radio-group @change="handlePayRadioChange">
						<label class="payLine">
							<view class="wx">微信支付</view>
							<view>
								<radio value="wxpay" :checked="payType == 'wxpay'" />
							</view>
						</label>
						<label class="payLine">
							<view class="ali">支付宝支付</view>
							<view>
								<radio value="alipay" :checked="payType == 'alipay'" />
							</view>
						</label>
					</radio-group>
				</view>
				<view class="payBtn">
					<Pay
						:isContinuesPay="isContinuesPay"
						payUrl=""
						:paymentType="payType"
						:payParams="payParams"
						:orderType="orderType"
						:orderParams="orderParams"
						@handlePaySuccess="handlePaySuccess"
						@handlePayFail="handlePayFail"
					>
						立即支付
					</Pay>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name:"PayDialog",
		data() {
			return {
				// 支付方式
				payType:'wxpay',
			};
		},
		props: {
			amount: {
				type: [Number,String],
				default: 0
			},
			payParams:{
				type:Object,
				default:()=>{
					return {}
				}
			},
			orderParams:{
				type:Object,
				default:()=>{
					return {}
				}
			},
			isContinuesPay:{
				type:Boolean,
				default:false
			},
			orderType:{
				type:String,
				default: 'default',
			},
		},
		methods: {
			// 弹窗开启
			open(){
				this.$refs.popup.open()
			},
			// 弹窗关闭
			close() {
				this.$refs.popup.close()
			},
			// 支付成功
			handlePaySuccess(){
				this.close()
				uni.showToast({
					title:'支付成功',
					icon:"none"
				})
			},
			// 支付失败
			handlePayFail(){
				this.close()
				uni.showToast({
					title:'支付失败',
					icon:"none"
				})
			},
			// 切换支付方式
			handlePayRadioChange(e){
				this.payType = e.detail.value
				this.orderParams.payment = e.detail.value
			}
		},
	}
</script>

<style lang="scss" scoped>
.payBox{
	background: #fff;
	border-radius: 30rpx 30rpx 0 0;
	padding: 70rpx 0 30rpx 0;
	position: relative;
	.price{
		color:#FF4030;
		font-size:43rpx;
		text-align: center;
		margin-bottom: 30rpx;
	}
	.close{
		width: 60rpx;
		height: 60rpx;
		position: absolute;
		right: 42rpx;
		top: 20rpx;
	}
	.payLine{
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1rpx solid #ededed;
		margin: 0 50rpx;
		padding: 63rpx 0 36rpx;
		font-size: 30rpx;
		color: #333;
		.wx{
			padding-left: 50rpx;
			background: url('@/static/images/service/wxPayIcon.png') no-repeat left center / 40rpx 40rpx;
		}
		.ali{
			padding-left: 50rpx;
			background: url('@/static/images/service/aliPayIcon.png') no-repeat left center / 40rpx 40rpx;
		}
	}
	.payBtn{
		margin: 68rpx 50rpx 0;
		background: #FD6260;
		border-radius:40rpx;
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		color: #fff;
	}
}
</style>